<template>
    <div class="search-results">
      <h2>搜索结果</h2>
  
      <div v-if="loading">加载中...</div>
  
      <div v-else>
        <p>搜索关键词：{{ query }}</p>
        <p>选择的模块：{{ module === '5' ? '家教课程' : '找家教' }}</p>
  
        <div class="course-list">
          <div class="course" v-for="(course, index) in courses" :key="index">
            <img :src="course.image" :alt="course.title" />
            <p>{{ course.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        query: this.$route.query.query, // 从 URL 获取搜索关键词
        module: this.$route.query.module, // 从 URL 获取模块
        courses: [], // 存储搜索结果
        loading: true, // 加载状态
      };
    },
    created() {
      this.fetchSearchResults();
    },
    methods: {
      fetchSearchResults() {
        // 假设这里是你的 API 请求，获取课程数据
        // 你可以用 Axios 或其他 HTTP 客户端发起请求
        setTimeout(() => {
          // 模拟 API 返回的课程数据
          this.courses = [
            { title: '🔥 北京英语快速提分', image: 'https://via.placeholder.com/150' },
            { title: '🎹 北京钢琴上门辅导', image: 'https://via.placeholder.com/150' },
            { title: '📖 西班牙语一对一辅导', image: 'https://via.placeholder.com/150' },
          ];
          this.loading = false;
        }, 1000); // 模拟 1 秒钟的加载时间
      },
    },
  };
  </script>
  
  <style scoped>
  .search-results {
    text-align: center;
    padding: 20px;
  }
  
  .course-list {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .course {
    width: 150px;
    text-align: center;
    border: 2px solid #004080;
    padding: 10px;
    border-radius: 8px;
    background-color: white;
  }
  
  .course img {
    width: 100%;
    border-radius: 8px;
  }
  </style>
  